<template>
  <div :class="[type==='dot'?'base-title-container':'base-title-container-solid']">
    <span class="title">{{ title }}</span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "BaseTitleContainer",
  props: {
    title: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: 'dot',
    }
  }
}
</script>

<style scoped>
.base-title-container {
  position: relative;
  border: 1px dotted var(--border-color14);
  padding: 10px 5px;
}

.base-title-container-solid {
  position: relative;
  border: 1px solid var(--border-color14);
  padding: 10px 5px;
}

.title {
  position: absolute;
  left: 5px;
  top: 0;
  padding: 0px 2px;
  transform: translateY(-50%);
  background-color: var(--bg-color1);
}
</style>
